<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue set</title>
  <script src="../assets/js/vue.js"></script>
</head>
<body>
  <h1>vue set</h1>
  <hr>
  <div id="app">
    <div>{{ count }}</div>
    <ol>
      <li v-for="aa in arr">{{ aa }}</li>
    </ol>
    <br>
  </div>
  <button onclick="add()">add</button>
  <script>
    function add() { 
      // Vue.set(outData, 'count', 2);
      // vue.count++;
      // outData.count++;

      // 直接操作一个DOM数据的“索引或者长度”时是不会自动更新数据的，这是js的限制，不是vue的限制，这就需要引入Vue.set()方法是实现，三个参数
      // 1:操作的对象或者数组 2:操作的key 3:操作要设置的value
      // vue.arr[1] = 'ddd';
      Vue.set(outData.arr, 1, 'ddd');
    }
    var outData = {
      count: 1,
      // goods: 'car'
      arr: ['aaa', 'bbb', 'ccc']
    }
    var vue = new Vue({
      el: '#app',
      data: outData
    })
  </script>
</body>
</html>